<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false" 
    :fullscreen="true"
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button> 
    </template>

    <a-card :bordered="false">
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-form layout="inline"> 
            <a-row style="margin-bottom: 12px;">
              <a-col :md="12" :xs="24">
                <a-form-item label="模板" :labelCol="{md: 4,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
                  {{ selectionRow.templateName }}
                </a-form-item>
              </a-col>
              <a-col :md="12" :xs="24">
                <a-form-item label="槽号" :labelCol="{md: 4,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
                  {{ selectionRow.slotId}}
                </a-form-item>
              </a-col>
            </a-row> 
         </a-form>   
        </a-form-model>
          <div id="main" :style="{ width: '100%', height: height + 'px'}"></div>
          <h4>权重</h4>
          <div id="mainQz" :style="{ width: '99%', height: '420' + 'px' }"></div>
      </a-spin>
    </a-card> 
  </j-modal> 
</template>

<script>
import moment from 'moment'
import { httpAction, getAction } from '@/api/manage' 
import * as echarts from 'echarts'
import JSelectDataSlot from '@/components/jeecgbiz/JSelectDataSlot2'
import '@/assets/less/TableExpand.less'
export default {
  name: 'Predict',
  components: { JSelectDataSlot },
  data() {
    return {
      title: '模型明细',
      width: 800,
      visible: false,
      disableSubmit: false,
      selectionRow: {},
      resultVisible: false, 
      height: document.body.clientHeight - 357, 
      confirmLoading: false,
      dataPropertyList:[]
    }
  },
  methods: {
    show(selectionRow) {
      this.selectionRow = selectionRow
      this.title = '【'+this.selectionRow.name +'】- 模型明细'
      this.confirmLoading = false
      this.resultVisible = false 
      this.visible = true
      this.loadDataProperty();
  
    },
    close() {
      this.$emit('close')
      this.visible = false
    },  
    handleCancel() {
      this.close()
    },
    resultCancel() {
      this.resultVisible = false
    },
    loadTb(){ 
      var that = this;
      var chartDom = document.getElementById('main');
      this.myChart = echarts.init(chartDom);
      var option;
      var xData  = [];
        for (let i = 0; i < JSON.parse(that.selectionRow.params)['loss'].length; i++) {
          xData.push(i+1);
        }

      option = {
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: JSON.parse(that.selectionRow.params)['loss'],
            type: 'line'
          }
        ],
         tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          position: function (pt) {
            return [pt[0], '10%']
          },
        },
      };

      option && this.myChart.setOption(option);

    },
    loadMainQz() {
      debugger
      var that = this
      var chartDom = document.getElementById('mainQz')
      var myChart = echarts.init(chartDom)
      var option
      let optionSource = [
        ['', 'category'],
        // [58212, 'Matcha Latte'],
        // [78254, 'Milk Tea'],
      ]
      const importanceData = JSON.parse(that.selectionRow.importance).sort((p1,p2)=>{
        return p1.Importance - p2.Importance // 降序排
      })
      console.log("importanceData:",importanceData)
      for (let i = 0; i < importanceData.length; i++) {
        // "Importance": -0.0000034923113768278724,
        // "feature": "electric"
        var obj = importanceData[i]
        var property = that.getPropertyText(obj['feature'])
        optionSource.push([obj['Importance'], property])
      }
      option = {
        dataset: {
          source: optionSource,
        },
        grid: { containLabel: true },
        xAxis: { name: '' },
        yAxis: { type: 'category' },
        title: {
          left: 'center',
          text: '',//'[ ' + that.modelBase.code + ' ] 特征重要度',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product',
            },
          },
        ],
      }

      option && myChart.setOption(option)
      window.onresize = function () {
        setTimeout(function () {
          myChart.resize()
        }, 10)
      }
    },
    getPropertyText(key) {
      let filterList = this.dataPropertyList.filter((item) => item.propNo == key)
      if (filterList.length > 0) {
        return filterList[0].propName
      }
      return key
    }, 
    loadDataProperty() {
      var that = this
      httpAction('/dataProperty/dataProperty/list?pageSize=99999', {}, 'get')
        .then((res) => {
          if (res.success) {
            that.dataPropertyList = res.result.records
            setTimeout(() => {
              that.loadTb();
              that.loadMainQz();
            }, 800);
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {})
    },
  },
}
</script>

<style scoped>
</style>